<template>
	<div class="content">
		<div class="btn-group">
			<div v-for="(item,index) in listverify" class="item" :key="index" @click="clickItem(item)">
        <img :src="item.img">
			</div>

		</div>

		<div class="btn-group-top"></div>
	</div>
</template>

<script>
import dayjs from "dayjs";

import {
  mapState,
  mapMutations,
  mapActions, mapGetters
} from 'vuex'

export default {
	data() {
		return {
      listverify: [
        {
          label: '身份证核身',
          value: 'idcard',
          img: require('@/assets/images/verify-type/id-card.png'),
          class: 'green',
        },
        {
          label: '刷脸核身',
          value: 'face',
          img: require('@/assets/images/verify-type/face.png'),
          class: 'blue',
        },
      ],
		}
	},
	components: {

	},
	computed: {
		...mapState(['deviceInfo', 'desKey','expirationTimeState']),
    ...mapGetters(['isWenzhouAddress']),

		version() {
			return process.env.version
		},

	},
	mounted() {

	},
	beforeDestroy() {

	},
	methods: {
    dayjs,
		...mapMutations(['setUserInfo', 'setDeviceInfo','setExpirationTimeState','clearUserInfo']),

    clickItem(t) {
      this.setUserInfo({
        verifyType:t.value,
      })
      this.$router.push({
        path: '/verify/index'
      })
    },
	}
};
</script>
<style lang="less" scoped>
.content {
	background: url('@/assets/images/index/bg.png');
	background-size: 100%;
	width: 100vw;
	height: 100vh;

	.btn-group-top {
		position: absolute;
		bottom: 170px;
		left: 0px;
		background: #fff;
		height: 80px;
		width: 100%;
		border-radius: 100%;
		z-index: 0;
	}

	.btn-group {
		position: absolute;
		bottom: 50px;
		left: 0px;
		width: 100%;
		height: 160px;
		background: #fff;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		justify-content: center;
		z-index: 1;
    .item{
      margin: 0 10px;
    }
    img {
      width: 170px;
      height: 127px;
    }
	}
}

</style>
